<template>
  <div class="DictionaryConfig">
    <div class="left_list">
      <dictionaryList ref="dictionary" @checkDictionary="checkDictionary"></dictionaryList>
    </div>
    <div class="right_content">
      <div class="top_menu">
        <div class="menu_left">
          <div class="check_item" @click="checkMenu(item)" v-for="(item, index) in checkList"
            :class="dictionaryId === item.id ? 'checkColor' : ''" :key="index">{{ item.name }}</div>
        </div>
      </div>
      <div class="bottom_main">
        <div class="details_box" v-show="dictionaryId === 1">
          <el-form style="display: flex;flex-direction: column;justify-content: center;align-items: center;" :model="form"
            label-width="120px" :rules="rules">
            <el-form-item label="字典名称：" prop="typeName">
              <el-input clearable v-model="form.typeName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="字典编码：" prop="code">
              <el-input clearable v-model="form.code" placeholder="例如：dic_yxfw      dic_ + 字典名称拼音简写"></el-input>
            </el-form-item>
            <el-form-item label="描述：" prop="codeDesc">
              <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="form.codeDesc">
              </el-input>
            </el-form-item>
            <el-button type="primary" @click="Save">保存</el-button>
          </el-form>
        </div>
        <div class="user_box" v-show="dictionaryId === 2">
          <div class="top_serch">
            <div class="serch_leftForm">
              <el-form style="display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;"
                :model="userForm" label-width="100px">
                <el-form-item label="类型名称：" prop="dicName">
                  <el-input clearable v-model="userForm.dicName" placeholder="请输入"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="serch_rightBtn">
              <el-button type="primary" @click="query">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </div>
          <div class="userList_content">
            <LsdTable slot="yjrwlb" :paginationAtrrs="table.paginationAtrrs" @pageChange="handleSizeChange"
              :compRef="table.compRef" ref="yjrwlb" :columns="table.columns" :title="table.title" :actions="table.actions"
              :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
              :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
          </div>
        </div>
        <div class="menu_box" v-show="dictionaryId === 3">3333333</div>
      </div>
    </div>
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig" @close="close(dialogConfig)">
      <div slot="dialog" class="form_box">
        <el-form :model="zdListForm" label-width="120px" :rules="rules">
          <el-form-item label="类型名称：" prop="dicName">
            <el-input clearable v-model="zdListForm.dicName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="名称描述：" prop="dicDesc">
            <el-input clearable v-model="zdListForm.dicDesc" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="sort">
            <el-input clearable v-model="zdListForm.sort" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </LsdDialog>
  </div>
</template>

<script>
import dictionaryList from "./components/dictionaryList";
import { dictionaryEdit, dictionaryDetails, dictionaryType, doSaveCascade, dictionaryTypeDelete, doUpdateCascade } from "@/api/SystemConfig/dictionary";
export default {
  components: {
    dictionaryList
  },
  data() {
    return {
      checkList: [
        {
          name: "明细",
          id: 1
        },
        {
          name: "字典下配置",
          id: 2
        }
      ],
      dictionaryId: Number(sessionStorage.getItem("dictionaryId")) || 1,
      form: {
        typeName: "",
        code: "",
        codeDesc: ""
      },
      rules: {
        typeName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入角色编码", trigger: "blur" }
        ]
      },
      userForm: {
        orgName: "",
        accountName: "",
        typeName: "",
        realName: ""
      },
      zdListForm: {},
      // 列表表格
      table: {
        isSelectFlag: false,
        compRef: "yjrwlb",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "",
        actions: [
          {
            id: "add",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          // {
          //   prop: "typeName",
          //   label: "字典名称",
          //   align: "center"
          // },
          {
            prop: "dicName",
            label: "类型名称",
            align: "center"
          },
          {
            prop: "createTime",
            label: "创建时间 ",
            align: "center"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "80px",
            render: (h, scope) => {
              const arr = ["删除", "编辑"];
              return (
                <div>
                  {
                    arr.map((item, index) => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              if (index === 0) {
                                this.$confirm("确定要删除该子类型吗?", "提示", {
                                  confirmButtonText: "确定",
                                  cancelButtonText: "取消",
                                  type: "warning"
                                }).then(() => {
                                  dictionaryTypeDelete(scope.row.id).then(res => {
                                    if (res) {
                                      this.$message({
                                        message: "删除成功!",
                                        type: "success"
                                      });
                                      if (this.dictionaryId === 1) {
                                        this.getDictionaryDetails(this.selectId);
                                      } else if (this.dictionaryId === 2) {
                                        const params = {
                                          pageNum: 1,
                                          pageSize: 10,
                                          dicTypeId: this.selectId
                                        };
                                        this.getDictionaryType(params);
                                        this.$refs.yjrwlb.paginationAtrrsInner["current-page"] = 1;
                                      }
                                    }
                                  });
                                })
                                  .catch(() => {
                                    this.$message({
                                      type: "info",
                                      message: "已取消删除"
                                    });
                                  });
                              } else if (index === 1) {
                                this.dialogConfig.title = "字典类型修改";
                                const { dicName, dicDesc, sort, dicTypeId, id } = scope.row;
                                this.$set(this.zdListForm, "dicName", dicName);
                                this.$set(this.zdListForm, "dicDesc", dicDesc);
                                this.$set(this.zdListForm, "sort", sort);
                                this.$set(this.zdListForm, "dicTypeId", dicTypeId);
                                this.$set(this.zdListForm, "id", id);
                                this.dialogConfig.isShow = true;
                              }

                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }

        ],
        tableAttr: {
          "min-height": `${window.innerHeight - (window.innerHeight * 0.45)}px`,
          height: `${window.innerHeight - (window.innerHeight * 0.45)}px`,
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      dialogConfig: {
        title: "字典类型新增",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "确定",
            type: "primary",
            id: "submit",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      },
      selectId: "",
      code: "",
      pid: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    checkMenu(item) {
      this.dictionaryId = item.id;
      sessionStorage.setItem("dictionaryId", item.id);
      if (this.dictionaryId === 1) {
        this.getDictionaryDetails(this.selectId);
      } else if (this.dictionaryId === 2) {
        const params = {
          pageNum: 1,
          pageSize: 10,
          dicTypeId: this.selectId
        };
        this.getDictionaryType(params);
      }
    },
    // 左侧字典列表点击事件
    checkDictionary(id, row) {
      console.log(id, row);
      if (!id) {
        this.selectId = "";
        this.table.tableData = [];
        this.table.paginationAtrrs.total = 0;
        return;
      }
      this.selectId = id;
      this.code = row.code;
      this.pid = row.pid ? row.pid : "";
      if (this.dictionaryId === 1) {
        this.getDictionaryDetails(id);
      } else if (this.dictionaryId === 2) {
        const params = {
          pageNum: 1,
          pageSize: 10,
          dicTypeId: id
        };
        this.getDictionaryType(params);
      }
    },
    close(val) {
      val.isShow = false;
    },
    onActionClick(item) {
      this[item.id]();
    },
    // 获取当前字典详情
    getDictionaryDetails(id) {
      if (this.selectId) {
        dictionaryDetails({ id: id }).then(res => {
          this.form = { ...res };
        });
      } else {
        return this.$message({
          message: "请选择一条字典数据!",
          type: "warning"
        });
      }
    },
    // 字典修改
    Save() {
      const params = {
        ...this.form
      };
      dictionaryEdit(params).then(res => {
        if (res) {
          this.$message({
            message: "修改成功!",
            type: "success"
          });
          this.getDictionaryDetails(this.selectId);
          this.$refs.dictionary.getDictionaryList();
          this.$refs.dictionary.$refs.zdlbList.paginationAtrrsInner["current-page"] = 1;
          this.$refs.yjrwlb.paginationAtrrsInner["current-page"] = 1;
        }
      });
    },
    // 获取当前字典下的类型列表
    getDictionaryType(val) {
      let params = {};
      if (val) {
        params = { ...val };
      } else {
        params = {
          pageNum: 1,
          pageSize: 10,
          dicTypeId: this.selectId
        };
      }
      if (this.selectId) {
        dictionaryType(params).then(res => {
          this.table.tableData = res.data;
          this.table.paginationAtrrs.total = res.total;
        });
      } else {
        return this.$message({
          message: "请选择一条字典数据!",
          type: "warning"
        });
      }
    },
    query() {
      const params = {
        pageNum: 1,
        pageSize: 10,
        dicTypeId: this.selectId,
        dicName: this.userForm.dicName
      };
      this.getDictionaryType(params);
      this.$refs.yjrwlb.paginationAtrrsInner["current-page"] = 1;
    },
    reset() {
      this.userForm = {};
      this.getDictionaryType();
      this.$refs.yjrwlb.paginationAtrrsInner["current-page"] = 1;
    },
    // 当前字典下的类型新增
    submit() {
      let [year, month, day, hours, minutes, seconds] = new Date().toLocaleString().split(/[^\d]+/);
      year = year.padStart(2, "0");
      month = month.padStart(2, "0");
      day = day.padStart(2, "0");
      hours = hours.padStart(2, "0");
      minutes = minutes.padStart(2, "0");
      seconds = seconds.padStart(2, "0");
      const createTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      const params = {
        ...this.zdListForm,
        dicTypeId: this.selectId,
        code: this.code ? this.code : "",
        pid: this.selectId
      };
      params.sort = Number(params.sort);
      if (this.dialogConfig.title === "字典类型新增") {
        params.createTime = createTime;
        doSaveCascade(params).then(res => {
          if (res) {
            this.$message({
              message: "添加成功!",
              type: "success"
            });
            const params2 = {
              pageNum: 1,
              pageSize: 10,
              dicTypeId: this.selectId
            };
            this.getDictionaryType(params2);
          }
        });
      } else if (this.dialogConfig.title === "字典类型修改") {
        doUpdateCascade(params).then(res => {
          if (res) {
            this.$message({
              message: "修改成功!",
              type: "success"
            });
            const params = {
              pageNum: 1,
              pageSize: 10,
              dicTypeId: this.selectId
            };
            this.getDictionaryType(params);
          }
        });
      }
      this.$refs.dictionary.getDictionaryList();
      this.dialogConfig.isShow = false;
      this.$refs.dictionary.$refs.zdlbList.paginationAtrrsInner["current-page"] = 1;
      this.$refs.yjrwlb.paginationAtrrsInner["current-page"] = 1;
    },
    add() {
      if (!this.selectId) {
        return this.$message({
          message: "请选择一条字典数据!",
          type: "warning"
        });
      }
      this.dialogConfig.title = "字典类型新增";
      this.$set(this.zdListForm, "dicName", "");
      this.$set(this.zdListForm, "dicDesc", "");
      this.$set(this.zdListForm, "sort", "");
      this.$set(this.zdListForm, "id", "");
      this.dialogConfig.isShow = true;
    },
    cancel() {
      this.dialogConfig.isShow = false;
    },
    // 分页
    handleSizeChange(val) {
      const params = {
        dicTypeId: this.selectId,
        pageNum: val["current-page"],
        pageSize: val["page-size"]
      };
      this.getDictionaryType(params);
    }

  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.DictionaryConfig {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 4px;

  .left_list {
    width: 32%;
    height: 100%;
    border-right: 1px solid #eee;
    box-sizing: border-box;
  }

  .right_content {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .top_menu {
      width: 100%;
      height: 8%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;

      // background-color: #1890ff;
      .menu_left {
        width: 30%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .check_item {
          box-sizing: border-box;
          margin: 0 30px;
          cursor: pointer;
          color: #303133;
          border-bottom: 3px solid transparent;

          &:hover {
            color: #1890ff;
            font-weight: 600;
          }
        }

        .checkColor {
          color: #1890ff;
          font-weight: 600;
          box-sizing: border-box;
          padding-bottom: 3px;
          border-bottom: 3px solid #1890ff;
        }
      }
    }

    .bottom_main {
      width: 100%;
      flex: 1;

      .details_box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;

        :deep(.el-input__inner) {
          width: 500px;
        }

        :deep(.el-textarea__inner) {
          width: 500px;
        }
      }

      .user_box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 5.5px 20px 12px 20px;

        .top_serch {
          width: 100%;
          height: 14%;
          display: flex;
          justify-content: center;
          align-items: center;

          .serch_leftForm {
            width: 90%;
            height: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;

            :deep(.el-input__inner) {
              width: 350px;
              height: 32px;
            }

            :deep(.el-form-item__content) {
              line-height: 32px;
            }

            :deep(.el-form-item) {
              margin-bottom: 10px;
            }
          }

          .serch_rightBtn {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
          }
        }

        .userList_content {
          width: 100%;
          flex: 1;
          margin-top: 30px;
        }
      }
    }
  }

  .form_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    :deep(.el-input__inner) {
      width: 500px;
    }
  }
}
</style>
